import React, { useState } from 'react'
import Echarts from 'echarts-for-react'

function Chp0301() {

    // 4.选项
    const option = {
        title: {
            // show:false,
            text: "我家厂子的销售图",
            /* left right top bottom */
            left: 'left',
            textStyle: {
                color: 'red',
                fontWeight: 100
            },
            borderWidth: 5,
            link: "https://www.baidu.com"

        },
        legend: {
            // show:false,
            data: ['销量'],
            // 改图例
            itemStyle: {
                color: "green"
            },
            // 改字
            textStyle: {
                color: 'red',
                fontWeight: 100
            },
        },
        // 折现,柱状,散点,(饼状图用不到)
        grid: {
            show: true,
            /* left,top,bottom,right num,百分数 */
            left: '5%',
            width: '40%', 
            height: '40%',            
            backgroundColor: 'green',
            borderWidth: 1,
        },

        // 提示框
        tooltip: {
            show: true,
            /* item,饼状图,散点图,axis 折现,柱状图,有坐标系 */
            trigger: 'axis'
        },
        // 工具条
        toolbox: {
            feature: {
                saveAsImage: {},
                // 切换图形
                magicType: { type: ['line', 'bar'] },
                // restore:{},
                restore: {},

            }
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                colorBy : 'series',
                center: ['50%', '50%'],
                left:'10%'
            },
            {
                name: 'Access From',
                type: 'pie',
                // 内圆半径 ,外圆半径6
                radius: ['10%','50%'],
                data: [
                    { value: 5, name: '衬衫' },
                    { value: 20, name: '羊毛衫' },
                    { value: 36, name: '雪纺衫' },
                    { value: 10, name: '裤子' },
                    { value: 10, name: '高跟鞋' },
                    { value: 20, name: '袜子' }
                ],
                center: ['70%', '50%'],
            },
        ]
    }
    return (
        <div>
            <div >
                我用的是函数组件
                <Echarts style={{ width: 800, height: 400, backgroundColor: "pink" }} option={option}></Echarts>
            </div>
        </div>
    )
}

export default Chp0301

